import loadingSVG from "@/assets/loading.svg";

const creatAndShowImg = (el) => {
  const img = document.createElement("img");
  img.className = "loading-img";
  img.src = loadingSVG;
  el.style.position = "relative";
  img.style.position = "absolute";
  img.style.top = "50%";
  img.style.left = "50%";
  img.style.transform = "translate(-50%, -50%)";
  el.appendChild(img);
};

const removeImg = (el) => {
  const img = el.querySelector(".loading-img");
  if (img) {
    img.remove();
  }
};

const ishasLoadingImg = (el) => {
  return el.querySelector(".loading-img");
};

export default function (el, bingding) {
  const { value } = bingding;
  if (value) {
    if (!ishasLoadingImg(el)) {
      creatAndShowImg(el);
    }
  } else {
    removeImg(el);
  }
}
